<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu mode="vertical" :default-active="$route.path"
        style="height: 100vh;" class="el-menu-vertical-demo" router>
        <!-- 是否使用 vue-router 的模式，
        启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
          <el-submenu v-for="(item, index) in menu.items" 
          :index="`menu-item-${index}`" :key="`menu-item-${index}`">
            <template slot="title">
              {{item.title}}
            </template>
            <el-menu-item v-for="(subItem,subIndex) in item.items"
            :key="`menu-item-${index}-${subIndex}`" :index="subItem.path">
              {{subItem.title}}
            </el-menu-item>
          </el-submenu>>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h3>测试-后台管理系统</h3>
        </el-header>
        <el-main>
          <router-view :key="$route.path"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class Main extends Vue {
  menu = {
    items: [
      {
        title: "内容管理",
        items: [
          { title: "首页", path: "/" },
          { title: "课程管理", path: "/courses/list" },
          { title: "课时管理", path: "/episodes/list" },
        ]
      },
      {
        title: "运营管理",
        items: [
          { title: "用户管理", path: "/users/list" },
        ]
      },
    ]
  }
}
</script>

<style scoped>
body{
  margin: 0;
}
</style>